export class KaiShiAnNiu extends HTMLElement {
	wenBen = null
	// 构造函数里this原有属性不能赋值
	constructor() {
		super()
		// shadowRoot外的子元素不会渲染，要用插槽
		let shadow = this.attachShadow({ mode: 'closed' })
		// 默认插槽
		let chaCao = document.createElement('slot')
		shadow.appendChild(chaCao)
		
		let style = document.createElement('style')
		style.textContent = `
			slot {
				color: #fff;
			}
		`
		shadow.append(style)
		
		this.wenBen = document.createElement('span')
		this.wenBen.style = `
			color: transparent;
			background: linear-gradient(90deg, rgba(150,250,250,1), rgba(250,150,250,1));
			-webkit-background-clip: text;
		`
		let wb = this.getAttribute('wen-ben')
		if (wb) this.wenBen.textContent = wb
		shadow.appendChild(this.wenBen)
	}
	// 首次被插入(append)文档 DOM 时，被调用
	connectedCallback() {
		this.style = `
			${this.style.cssText}
			display: block;
			cursor: pointer;
			text-align: center;
			font-weight: 600;
			font-size: 1.2rem;
			background: linear-gradient(90deg, rgba(150,50,200,1), rgba(50,150,200,1));
			box-shadow: 0px 0px 10px 5px rgba(63, 127, 255, 0.2);
			text-shadow: 3px 3px 2px rgba(100, 100, 200, 0.2);
			padding: 0.8rem 2rem;
			margin: 1rem;
			border-radius: 1.5rem 1rem 1.5rem 0 / 1.5rem 1rem 1.5rem 0;
		`
	}
	// 从文档 DOM 中删除时，被调用
	disconnectedCallback() {}
	// 被移动到新的文档时，被调用
	adoptedCallback() {}
	// 增加、删除、修改自身属性时，被调用
	attributeChangedCallback(name, oldValue, newValue) {
		if (name == 'wen-ben') this.wenBen.textContent = newValue
	}
	// attributeChangedCallback监听的属性必须在此返回
	static get observedAttributes() {
		return ['wen-ben'];
	}
}
// custom element 的名称不能是单个单词，且其中必须要有短横线
customElements.define("kai-shi-an-niu", KaiShiAnNiu)


